<template>
	<div class="add-note-wp"
		@mouseenter="maskShow=true"
		@mouseleave="maskShow=false"
		@click="onAdd"> 
		<div class="img-wp">
			<div class="inner-img-wp">
				
			</div>
		</div>
		<div class="item-name">添加快捷方式</div>
		<div class="masker-wp" >
			<div class="masker" v-show="maskShow"></div>
		</div>
	</div>
</template>
<script type="text/javascript">
	import {mapState,mapMutations} from "vuex"
	export default {
		name: 'component_name',
		props:[],
		data () {
			return {
				maskShow:false
			};
		},
		created() {

		},
		methods: {
			onAdd() {
				const vm = this;
				vm.fixDialogShow(true);
				vm.getDialogObj({empty:true});
			},
			...mapMutations(["fixDialogShow","getDialogObj"]),
		},
		computed:{
			...mapState(["isDialogShow","dialogObj"]),
			dialogObj1() {
				return this.dialogObj;
			}
		},
		watch:{
			dialogObj1(obj) {
				console.log(obj)
			}
		}
	};
</script>
<style type="text/less" lang="less" scoped>
	.add-note-wp {
		display: inline-block;
		width: 200px;
		height: 200px;
		border-radius: 6px;
		text-align: center;
		display: inline-block;
		box-sizing: border-box;
		padding-top: 27px;
		position:relative;
		cursor: pointer;
		margin-right: 20px;
		overflow: hidden;
		.img-wp {
			width: 108px;
			height: 108px;
			background-color: #ccc;
			text-align: center;
			border-radius:50%;
			display: inline-block;
			.inner-img-wp {
				width: 55px;
				height: 55px;
				overflow: hidden;
				display: inline-block;
				margin-top: 27px;
				position: relative;
				img {
					width: 100%;
					height: 100%;
				}
			}
			
		}	
		.item-name {
			width: 140px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin: 20px auto;
		}	
		.masker-wp {
			position:absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			
			.masker {
				position:absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0.28;
				background-color:#ded9d9;
			}
		}	
	}
</style>